<script setup lang="tsx" name="XtxTabs">
import { provide, toRefs, useSlots } from 'vue'
const props = defineProps<{
  modelValue: string
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
  (e: 'update:index', v: number): void
}>()
const slots = useSlots()
const handleClick = (name: string, index: number) => {
  emit('update:modelValue', name)
  emit('update:index', index)
}
const { modelValue } = toRefs<any>(props)
// console.log(modelValue)
// console.log(2)
provide('activeNameValue', modelValue.value)

// 如果v-for 会在children 里面
// const arr = slots?.default?.()
const arr = (slots as any).default()
console.log(arr)
const panes = [] as any[]
arr?.forEach((item: any) => {
  if (item.type?.name == 'XtxTabsPane') panes.push(item)
  else {
    if (item.children instanceof Array) {
      // console.log(typeof item.children)
      // console.log(item.children instanceof Array)
      // console.log(item.children)
      item.children?.forEach((panel: any) => panel.props && panes.push(panel))
    }
  }
})

// const panes = slots?.default?.()
// console.log(panes)
// const children = panes?.[0]?.children
// console.log(children)
const tabs = () => {
  console.log(panes)
  const navs = (
    <nav>
      {panes?.map((item, index) => (
        <a href="javascript:;" key={item.props?.name} class={props.modelValue === item.props?.name ? 'active' : ''} onClick={() => handleClick(item.props?.name, index)}>
          {item.props.label}
        </a>
      ))}
    </nav>
  )
  // return <div class="xtx-tabs">{navs}</div>
  return <div class="xtx-tabs">{[navs, panes]}</div>
}
</script>

<template>
  <tabs></tabs>
</template>

<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
